<template>
  <div class="topBox">
    <div class="L"><a href="index.html">Lattiex</a></div>
    <div class="C">
      <!-- 搜索框 -->
      <div class="saerchbox"><input name="" type="text" placeholder="请输入您要搜索的内容" /><img src="/assets/images/ss.png" /></div>
    </div>
    <div class="R"><img src="/assets/images/tr.png" /></div>
  </div>
  <div class="clear"></div>
  <!-- 轮播图 -->
  <div class="aui-m-slider">
    <van-swipe class="my-swipe" height="210" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in recomList" :key="item.id">
        <!-- query proid传参数过去  -->
        <router-link :to="{ path: '/product/product/info', query: { proid: item.id } }">
          <img :src="item.cover_cdn" style="width: 100%; height: 100%; object-fit: cover" />
        </router-link>
      </van-swipe-item>
    </van-swipe>
  </div>

  <div class="clear"></div>
  <div class="lqgwBox">
    <!-- 分类列表 -->
    <ul>
      <li v-for="item in typeList" :key="item.id">
        <router-link :to="{ path: '/product/product/index', query: { typeid: item.id } }">
          <img :src="item.cover_cdn" />
          <p>{{ item.name }}</p>
        </router-link>
      </li>
    </ul>
  </div>
  <div class="clear"></div>

  <div class="clear"></div>
  <div class="contitbox">
    <p>新品推荐</p>
  </div>
  <div class="clear"></div>
  <!-- 新品列表 -->
  <ul class="proul">
    <li v-for="item in newList" :key="item.id">
      <router-link :to="{ path: '/product/product/info', query: { proid: item.id } }">
        <img :src="item.cover_cdn" height="187.2" />
        <p style="text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-indent: 5px">{{ item.name }}</p>
        <p style="color: #fe7923; text-indent: 3px">
          ￥<span style="font-weight: bolder">{{ item.price }} </span>到手价
        </p>
      </router-link>
    </li>
  </ul>
  <div class="clear"></div>
  <div class="adBox">
    <img src="/assets/images/igame.png" />
  </div>
  <div class="clear"></div>

  <div class="contitbox">
    <p>热销产品</p>
  </div>
  <div class="clear"></div>
  <ul class="proul_2">
    <li v-for="item in hotList" :key="item.id">
      <router-link :to="{ path: '/product/product/info', query: { proid: item.id } }">
        <img :src="item.cover_cdn" height="123" />
        <p style="text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-indent: 5px">{{ item.name }}</p>
        <p style="color: #fe7923; text-indent: 3px">
          ￥<span style="font-weight: bolder">{{ item.price }} </span>到手价
        </p>
      </router-link>
    </li>
  </ul>
  <div class="clear"></div>
  <div class="h54"></div>
  <div class="clear"></div>
  <Tab />
</template>
<script>
  import Tab from 'components/common/Tab.vue'
  import { Swipe, SwipeItem } from 'vant'
  export default {
    components: {
      Tab,
    },
    data() {
      return {
        recomList: [],
        typeList: [],
        newList: [],
        hotList: [],
      }
    },
    created() {
      this.getHomeData()
    },
    methods: {
      async getHomeData() {
        let result = await this.$api.home()

        if (result.code === 1) {
          this.recomList = result.data.recomList

          this.typeList = result.data.typeList

          this.newList = result.data.newList

          this.hotList = result.data.hotList
        }
      },
    },
  }
</script>
<style scoped>
  .topBox {
    position: sticky;
    top: 0;
    z-index: 1000;
  }
</style>
